<template>
  <div>
    <el-row>
      <el-col :span="24">
        <dy-panel>
          <dy-panel-header title="菜单管理"></dy-panel-header>
          <el-row>
            <el-col :span="24">
              <dy-panel-body>
                <el-row>
                  <el-form :inline="true" class="demo-form-inline">
                    <!--<el-form-item label="类型">-->
                    <!--<el-select v-model="queryParam.resourceType" placeholder="请选择资源类型">-->
                    <!--<el-option label="所有类型" value></el-option>-->
                    <!--<el-option-->
                    <!--v-for="(role, index) in resourceTypeList"-->
                    <!--:key="index"-->
                    <!--:label="role.resourceTypeName"-->
                    <!--:value="role.resourceTypeCode"-->
                    <!--&gt;</el-option>-->
                    <!--</el-select>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="关键字">-->
                    <!--<el-input-->
                    <!--v-model="queryParam.searchKey"-->
                    <!--placeholder="请输入资源名称、标识符查询"-->
                    <!--@change="doSearchList"-->
                    <!--&gt;</el-input>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item>-->
                    <!--<el-button type="primary" @click="doSearchList">查询</el-button>-->
                    <!--</el-form-item>-->
                  </el-form>
                </el-row>
                <el-row>
                  <el-button type="primary" :disabled="!operateBtn.addBtn" @click="onAddBtnEvent">新增</el-button>
                  <el-button type="primary" @click="doSearchList">查询</el-button>

                </el-row>
              </dy-panel-body>
              <dy-panel-body v-loading="loading">
                <el-table
                  @selection-change="onSelectRowEvent"
                  :data="tableList"
                  row-key="id"
                  :tree-props="{children: 'children'}"
                  style="width: 100%;text-align: center"
                  @sort-change="onSortTableEvent"
                >
                  <el-table-column width="50" label="序号"></el-table-column>
                  <el-table-column prop="roleCode" label="图标" align="center" width="50">
                    <template slot-scope="scope">
                      <i v-html="scope.row.iconDefault" class="iconfont"></i>
                    </template>
                  </el-table-column>
                  <el-table-column prop="resourceName" label="资源名称" align="center" width="180"></el-table-column>
                  <el-table-column prop="resourceType" label="类型" align="center" width="60"></el-table-column>
                  <el-table-column prop="resourceUrl" label="标识符"></el-table-column>
                  <el-table-column prop="orderIndex" label="排序" align="center" width="60"></el-table-column>
                  <el-table-column prop="disabled" label="状态" align="center" width="65">
                    <template slot-scope="scope">
                      <el-tag
                        :type="scope.row.disabled==1?'danger':''"
                        effect="dark"
                      >{{scope.row.disabled==1?'禁用':'正常'}}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createTime" label="创建时间" align="center" width="140"></el-table-column>
                  <el-table-column prop="createTime" label="更新时间" align="center" width="140"></el-table-column>
                  <el-table-column prop="id" label="操作" width="300">
                    <template slot-scope="scope">
                      <el-link
                        style="margin-right: 10px"
                        @click="onEditRowEvent(false,scope.row)"
                        type="primary"
                      >编辑
                      </el-link>
                      <el-link style="margin-right: 10px" @click="onAddRowClick(scope.row)" type="primary">新增</el-link>
                      <el-link @click="onDeleteRowEvent(scope.row)" style="margin-right: 10px" type="primary">删除
                      </el-link>
                    </template>
                  </el-table-column>
                </el-table>
                <div>
                </div>
              </dy-panel-body>
            </el-col>
          </el-row>
        </dy-panel>
      </el-col>
    </el-row>
    <el-row>
      <dy-modal
        :read-only="editModal.readOnly"
        v-if="editModal.visible"
        :visible.sync="editModal.visible"
        :form-key="editModal.formKey"
        :title="editModal.title"
        v-on:close="onRefresh"
        width="30%">
        <auth-menu-update :data="editModal.data" :menuList="tableList" :form-key="editModal.formKey"></auth-menu-update>
      </dy-modal>
    </el-row>
  </div>
</template>
<script>
import {DyPanel, DyPanelHeader} from '@/view/panel'
import DyPanelBody from '@/view/panel/DyPanelBody'
import authTbResourceApi from '@/apis/AuthApp/authTbResourceApi.js'
import AuthMenuUpdate from '@/pages/AuthApp/AuthResource/AuthMenuUpdate.vue'
import DyPagination from '@/components/pagination/DyPagination.vue'

export default {
  name: 'userList',
  components: {
    DyPanelBody,
    DyPanel,
    DyPanelHeader,
    AuthMenuUpdate,
    DyPagination
    },
    data () {
      return {
        /**
         * 编辑弹出框
         */
        editModal: {
          formKey: 'AuthMenuList',
          readOnly: false,
          data: {},
          visible: false,
          title: '新增菜单'
        },
        loading: true,
        /**
         * 查询参数
         */
        queryParam: {
          currentPage: 1,
          pageSize: 10
        },
        /**
         * 上方操作按钮
         */
        operateBtn: {
          addBtn: true,
          editBtn: false,
          delBtn: true,
          importBtn: true,
          exportBtn: true
        },
        /**
         * 已选中的行
         */
        selectRows: [],
        deptFilter: '',
        resourceTypeList: [{
          resourceTypeCode: 'menu',
          resourceTypeName: '菜单',
        }, {
          resourceTypeCode: 'elm',
          resourceTypeName: '元素',
        }],
        deptList: [],
        tableTotal: 0,
        tableList: []
      }
    },
    created () {
      /**
       * 执行列表查询
       * */
      this.doSearchList()
    },

    methods: {
      /**
       * 编辑按钮事件处理
       */
      onEditBtnEvent () {
        if (this.selectRows.length != 1) {
          return
        }
        this.editModal.readOnly = false
        this.editModal.data = this.selectRows[0]
        this.editModal.visible = true
      },
      onRefresh (isRefresh) {
        if (isRefresh) {
          this.doSearchList()
        }
      },
      /**
       * 新增按钮事件处理
       */
      onAddBtnEvent () {
        this.editModal.readOnly = false
        this.editModal.data = {}
        this.editModal.visible = true
      },
      onAddRowClick (row) {
        this.editModal.readOnly = false
        this.editModal.data = {
          fkParentId: row.id,
          disabled: 0
        }
        this.editModal.visible = true
      },
      /**
       * 编辑某行事件处理
       * @param readOnly
       * @param data
       */
      onEditRowEvent (readOnly, data) {
        this.editModal.readOnly = false
        this.editModal.data = this.cloneDeep(data)
        this.editModal.visible = true
      },
      /**
       * 选中某行事件处理
       * @param selection
       */
      onSelectRowEvent (selection) {
        this.selectRows = selection
        if (this.selectRows.length != 1) {
          this.operateBtn.editBtn = false
        } else {
          this.operateBtn.editBtn = true
        }
      },
      onDeleteRowEvent (row) {
        let ids = [row.id]

        authTbResourceApi.deleteListService({ids: ids}).then((msg) => {
          this.onRefresh(true)
        })
      },
      /**
       * 排序事件处理
       * @param col
       */
      onSortTableEvent (col) {
        this.queryParam.fixed = col.prop
        this.queryParam.sort = col.order == 'descending' ? 'desc' : 'asc'
        this.doSearchList()
      },
      /**
       * 查询列表业务处理
       */
      doSearchList () {
        this.loading = true
        this.queryParam.resourceType = 'menu'
        this.queryParam.pageSize = 10000
        authTbResourceApi.selectTreeList(this.queryParam).then(msg => {
          setTimeout(() => {
            this.tableList = msg.rows
            this.tableTotal = msg.total
            this.queryParam.currentPage = msg.currentPage
            this.loading = false
          }, 200)
        })
      }
    },
    computed: {},
    watch: {
      deptFilter (val) {
        this.$refs.tree.filter(val)
      }
    }
  }
</script>
